package com.example.app.components


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.absoluteOffset
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Checkbox
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet

@Composable
fun ComstaintLayout2() {
    var check by remember {
        mutableStateOf(false)
    }

    // 将约束关系全部写在这里,方便复用
    val constraints = ConstraintSet {
        // 创建引用
        // 在LayoutId中使用
        val icon = createRefFor("icon")
        val title = createRefFor("title")
        val scondTitle = createRefFor("scondTitle")
        val check = createRefFor("checkBox")

        constrain(icon) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
        }
        constrain(title) {
            start.linkTo(icon.start, margin = 20.dp)
            top.linkTo(parent.top)
        }
        constrain(scondTitle) {
            start.linkTo(title.start)
            bottom.linkTo(parent.bottom)
            top.linkTo(parent.top)
        }
        constrain(check) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end, margin = 10.dp)
        }
    }
    // constraintSet 使用约束关系
    ConstraintLayout(modifier =
        Modifier
            .fillMaxWidth()
            .background(Color.Cyan)
            .height(100.dp),
        constraintSet = constraints
    ) {
        Icon(
            imageVector = Icons.Default.AccountBox,
            contentDescription = null,
            modifier = Modifier.layoutId("icon")
        )

        Text(text = "主标题", modifier = Modifier.layoutId("title"))

        Text(text = "副标题", modifier = Modifier.layoutId("scondTitle"))

        Checkbox(
            checked = check,
            onCheckedChange = {
                check = it
            },
            modifier = Modifier.layoutId("checkBox"))
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun ComstaintLayout2Preview() {
    ComstaintLayout2()
}

